<template>
  <div id="waypoint" class="my-padded-tb-large animate__animated animate__fadeIn">
    <div class="ui container">
      <!--头部-->
      <div class="ui segment top attached">
        <div class="ui link list horizontal">
          <router-link class="item" to="/about" tag="a">
            <img :src="blog.avatar" alt="" class="ui avatar image">
            <div class="content">
              <a class="header">{{blog.nickname}}</a>
            </div>
          </router-link>
          <div class="item">
            <i class="calendar alternate outline icon"></i>{{blog.createTime}}
          </div>
          <div class="item">
            <i class="icon alternate eye"></i> {{blog.views}}
          </div>
          <div class="item">
            <i class="icon comments"></i> {{blog.commentCount}}
          </div>
        </div>
      </div>
      <!--图片区域-->
      <div class="ui segment attached">
        <img :src="blog.firstPicture" alt="" class="ui fluid rounded image">
      </div>
      <!--内容区域-->
      <div class="ui segment attached">
        <!--分类和原创类型-->
        <div class="ui right aligned basic segment">
          <div class="ui label basic orange">
            {{blog.flag == 0 ? '原创' : blog.flag == 1 ? '转载' : blog.flag == 2 ? '翻译' : '其他'}}
          </div>
          <div @click="gotoType(blog.typeId)" class="ui label basic blue my-cursor-pointer">
            {{blog.type}}
          </div>
        </div>
        <!--标题-->
        <h2 class="ui center aligned header">{{blog.title}}</h2>
        <br>
        <!--博客内容-->
        <div id="content" class="js-toc-content my-padded-lr-responsive my-padded-tb-large typo typo-selection" v-html="blog.content"></div>
        <!--标签-->
        <div class="my-padded-lr-responsive">
          <div @click="gotoTag(blog.tagIds[index])" v-for="(tag, index) in blog.tags" class="ui basic blue left pointing label my-cursor-pointer">{{tag}}</div>
        </div>
        <!--赞赏按钮-->
        <div v-if="blog.appreciation==='0'" class="ui center aligned basic segment">
          <el-tooltip class="item" content="wechat" placement="bottom" effect="light">
            <button type="button" id="payButton" class="ui blue basic circular button">赞赏</button>
            <div slot="content">
              <!--赞赏二维码-->
              <div class="ui payQR flowing transition">
                <div class="ui blue basic label">
                  <div class="ui images" style="font-size: inherit !important;">
                    <div class="image">
                      <img src="../assets/images/weixin.jpg" alt="" class="ui rounded bordered image" style="width: 120px;">
                      <div style="text-align: center">微信</div>
                    </div>
                    <div class="image">
                      <img src="../assets/images/weixin.jpg" alt="" class="ui rounded bordered image" style="width: 120px;">
                      <div style="text-align: center">支付宝</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tooltip>
        </div>
      </div>
      <!--博客信息-->
      <div class="ui attached message positive">
        <div class="ui middle aligned grid my-padded-lr-responsive">
          <div class="thirteen wide column">
            <ul class="list">
              <li>作者： {{blog.nickname}}
              <li>发布时间： {{blog.createTime}}</li>
              <li v-if="blog.shareStatement==='0'">版权声明：本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0 </a>许可协议。转载请注明来自 <a href="#">Chenyumeng</a> 的博客！</li>
              <li>公众号转载：请&nbsp;<router-link tag="a" to="/about">联系作者</router-link></li>
            </ul>
          </div>
          <div class="three wide column">
            <img src="https://chenyumengblog.oss-cn-hangzhou.aliyuncs.com/img/WeChat.jpg" alt="" class="ui right floated rounded bordered image" style="width: 110px">
          </div>
        </div>
      </div>
      <!--留言区域-->
      <keep-alive>
        <comment-area v-if="blog.commentabled==='0'" :blog="blog"></comment-area>
      </keep-alive>
    </div>

    <!--工具栏-->
    <div id="toolbar" class="my-fixed my-right-bottom my-padded-large">
      <div class="ui vertical icon buttons">
        <el-popover placement="left-start" width="250" trigger="click">
          <ol class="js-toc"></ol>
          <el-button class="ui blue button" slot="reference" @click="getDirectory">目录</el-button>
        </el-popover>
        <div @click="scrollTo('#comment-container')" type="button" class="ui blue button">留言</div>
        <el-tooltip class="item" content="wechat" placement="left" effect="light">
          <button type="button" class="ui icon button wechat"><i class="icon weixin"></i></button>
          <div slot="content">
            <h4 class="ui center aligned header" style="margin: 0 0 10px">手机阅读</h4>
            <div id="qrCode" ref="qrCodeDiv"></div>
          </div>
        </el-tooltip>
        <div @click="scrollTo('#Top')" class="ui icon button"><i class="icon chevron up"></i></div>
      </div>
    </div>
  </div>
</template>

<script>
  import CommentArea from "../components/CommentArea";
  import {getBlogById} from "../api/blog";
  import Prism from '../assets/js/prism';
  import QRCode from 'qrcodejs2';
  import tocbot from 'tocbot';

  export default {
    name: "Blog",
    components: {CommentArea},
    data() {
      return {
        blog: {},
        users: this.$store.getters.AllUser,
        typeList: this.$store.getters.AllType,
        tagList: this.$store.getters.AllTag,
        flag: false,
      }
    },
    activated() {
      if (this.$route.params.blogId === undefined) {
        this.$router.push({name:'Home'})
      } else {
        this.$scrollTo('#Top', 10)
        this.getBlog()
      }
    },
    mounted: function () {
      this.$nextTick(function () {
        this.bindQRCode();
      })
    },
    methods: {
      getBlog() {
        getBlogById({id: this.$route.params.blogId}).then(res => {
          if (res.code === 200) {
            this.blog = res.data
            this.flag = true
            // let createTime =
            this.blog.createTime = this.blog.createTime.split(" ")[0]
            this.timer = setTimeout(() => {
              Prism.highlightAll() // 这里加定时器让它后执行，不然没效果
            }, 0)
            this.initBlog()
          }
        })
      },
      initBlog() {
        // 设置博客的用户信息
        this.users.forEach(value => {
          if (value.id === this.blog.userId) {
            this.blog.nickname = value.nickname
            this.blog.avatar = value.avatar
          }
        })
        // 设置博客的分类信息
        this.typeList.forEach(value => {
          if (this.blog.typeId === value.id) {
            this.blog.type = value.name
          }
        })
        // 设置博客的标签信息
        let arr = []
        this.tagList.forEach(tagValue => {
          this.blog.tagIds.forEach(value1 => {
            if (tagValue.id === value1) {
              arr.push(tagValue.name)
            }
          })
          arr.reverse()
          this.blog.tags = arr
        })
      },
      gotoType(typeId) {
        this.$router.push({name: 'Types', params: {typeId: typeId}})
      },
      gotoTag(tagId) {
        this.$router.push({name: 'Tags', params: {tagId: tagId}})
      },
      scrollTo(value) {
        this.$scrollTo(value, 500)
      },
      bindQRCode: function () {
        new QRCode(this.$refs.qrCodeDiv, {
          text: window.location.href,
          width: 120,
          height: 120,
          colorDark : "#000000",
          colorLight : "#ffffff",
          correctLevel : QRCode.CorrectLevel.H
        })
      },
      getDirectory() {
        setTimeout(() => {
          tocbot.init({
            tocSelector: ".js-toc",//要把目录添加元素位置，支持选择器
            contentSelector: ".js-toc-content",//获取html的元素
            headingSelector: "h1, h2, h3",//要显示的id的目录
            hasInnerContainers: true
          });
        }, 0)
      },
      mouseIn() {
        console.log("mouseIn")
      },
      mouseOut() {
        console.log("mouseOut")
      }
    }
  }
</script>

<style scoped>
  @import url('https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.css');
</style>
